<template>
<div>
	<!--头部-->
	<div class="shang-top">
		<a href="#/"><img class="shang-jian" src="../assets/img/duanhuowang/zuo.png" alt=""/></a>
		<span class="shangpin">商品详情</span>
		<span class="shang-rimg">
			<img class="shang-gou" src="../assets/img/shouye/meishi/baigou.png" alt=""/>
			<img class="shang-ff" src="../assets/img/duanhuowang/fan.png" alt=""/>
			<img class="shang-shou" src="../assets/img/shouye/pinpai/xiaoshouye.png" alt=""/>
		</span>
	</div>
	<!--轮播图-->
	<div class="shang-dtu">
		<a>
		<img class="shang-img shang-active" src="../assets/img/shouye/meishi/kouhong.png" alt=""/>
		<img class="shang-img" src="../assets/img/duanhuowang/chun.png" alt=""/>
		<img class="shang-img" src="../assets/img/shouye/tuijian/kouhong2.png" alt=""/>
		<img class="shang-img" src="../assets/img/shouye/lunbo/fang4.png" alt=""/>
		<img class="shang-img" src="../assets/img/shouye/chaozhi/quqi.png" alt=""/>
		</a>
		<div class="shang-fen">
			<span class="shang-span zspan"></span>
			<span class="zspan"></span>
			<span class="zspan"></span>
			<span class="zspan"></span>
			<span class="zspan"></span>
		</div>
	</div>
	<!--英国直邮-->
	<div class="address">
		<!--标题-->
		<p class="sbiao">
			<img class="ytu" src="../assets/img/duanhuowang/qi.png" alt=""/>
			<span class="yinguo">英国直邮</span>
			<span>不易脱妆口红</span>
		</p>
		<!--价钱-->
		<p class="smoney">￥169</p>
		<!--关税-->
		<p class="guanshui">关税：￥10<img src="../assets/img/shouye/meishi/xiangq.png"/></p>
		<p>邮费：￥50</p>
	</div>
	<div class="jifen">
		<img class="jtt" src="../assets/img/duanhuowang/jifen.png" alt=""/>
		<span class="jzi">500000积分可抵500元，限购1件</span>
	</div>
	<!--不支持七天退换-->
	<div class="tuihuan">
		<span class="tuihuo"><img src="../assets/img/duanhuowang/tui.png"/>不支持七天无忧退换</span>
		<span class="tuihuo"><img src="../assets/img/duanhuowang/fei.png"/>海外直邮</span>
		<span class="tuihuo">
			<img src="../assets/img/duanhuowang/zhengz.png" alt=""/>
			正品保证<img class="rjian" src="../assets/img/fenlei/more.png" alt=""/>
		</span>
	</div>
		<div class="zbiao"> 
			<img class="ztu" src="../assets/img/duanhuowang/qi.png" alt=""/>
			<div class="rtu">
				<span class="dizhi">直邮，下单时需要提供真实姓名和身份证号以及收货地址<br/>
				请先去添加并填写这些信息</span>
				<span class="ztian">去添加</span>
			</div>
		</div>
		<!--阿拉灯精选-->
		<div class="aldeng">
			<!--左-->
			<div class="dleft">
				<div class="radiu"><img class="biaozhi" src="../assets/img/shouye/tuijian/deng.png" alt=""/></div>
				<p class="jxx">阿拉丁精选</p>
			</div>
			<!--右-->
			<div class="dright">
				这段文字主要是用来介绍上面的产品，具体内容待定，先放一段文字做占位符,这段文字主要是用来介绍上面的产品，具体内容待定，先放一段文字做占位符。
			</div>
		</div>
		<!--商品信息-->
		<ul class="sxin">
			<li>商品信息</li>
			<li>【品    牌】ANFNA</li>
			<li>【规    格】128/支</li>
			<li>【产    地】英国</li>
			<li>【储存方法】常温</li>
			<li>【保 质 期】2年</li>
			<li>【生产日期】见实物外包装（不断更新中，阿拉灯只为您挑选最新日期）</li>
			<li>【快递信息】快递100</li>
			<li>【服务信息】由品牌商从英国发货</li>
			<li>【温馨提示】本产品为易碎品，请轻拿轻放</li>
		</ul>
		<div class="cnuo">
			<div class="bnuo">
			<p class="pbiao">
				<span class="xian"></span><span class="ppp">品牌承诺</span><span class="xian"></span>
			</p>
			<div class="ptu">
				<img src="../assets/img/duanhuowang/zheng.png" alt=""/>
				<p>正品保证</p>
			</div>
			<div class="ptu">
				<img src="../assets/img/shouye/sousuo/6airplane.png" alt=""/>
				<p>海外直邮</p>
			</div>
			<div class="ptu">
				<img src="../assets/img/duanhuowang/bu.png" alt=""/>
				<p>超时发货补贴</p>
			</div>
			<div class="ptu">
				<img class="picc" src="../assets/img/duanhuowang/PICC.png" alt=""/>
				<p>PICC承保</p>
			</div>
			</div>
		</div>
		<div class="xiaotieshi">
			<img src="../assets/img/shouye/lunbo/tieshi.png" alt=""/>
			<p>运费相关：英国直邮商品相关运费为50元。</p>
			<p>价格说明：划线价、国内参考价、店头价可能是品牌专柜价、牌价或品牌商提供的指导价等价格，其受国家地区、时间和市场行情波动的影响而可能与您购物时看到的不一致，该价格仅供参考。</p>
			<p>商品包装：海外商品包装更换较为频繁，因此顾客您收到的货品有可能与图片不完全一致，页面图片及描述仅供参考，请以您最终收到的实物为准，由此给您带来的不便请您多谅解。</p>
			<p>服务承诺：阿拉灯承诺站内销售商品均为海外原装正品，并会持续为顾客们带来海外最新商品。</p>
		</div>
		<!--爆品商品-->
		<p class="retui">热卖推荐</p>
		<div class="s-shang">	
		<div class="s-reping">
			<div class="s-danshang">
				<img src="../assets/img/shouye/meishi/mei6.png" alt=""/>
				<p class="s-p1">会呼吸丝滑蜜粉</p>
				<p class="s-p2">
					<img src="../assets/img/shouye/tuijian/repin.png" alt=""/>
					<span>热品</span>
				</p>
				<p class="s-p3">￥198</p>
			</div>
		</div>
		<!--右-->
		<div class="s-reping">
			<div class="s-danshang2">
				<img src="../assets/img/shouye/meishi/mei7.png" alt=""/>
				<p class="s-rp1">原味坚果</p>
				<p class="s-rp2">
					<img src="../assets/img/shouye/tuijian/repin.png" alt=""/>
					<span>热品</span>
				</p>
				<p class="s-p3">￥198</p>
			</div>
		</div> 
		<!--58888888888888888888888888888888-->
		<!--455555555555555555555555555555555-->
		</div>
		<!--继续拖动文字-->
		<div class="tuobiao">
			<span class="tuo-left"></span><a href="#/ShangPingXiangQing2"><span class="tuwen">继续拖动，查看图文详情</span></a>
			<span class="tuo-right"></span>
		</div>
		<!--添加购物车-->
		<div class="tiangou">
			<span class="kefu">
				<img src="../assets/img/duanhuowang/kefu.png" alt=""/>在线客服
			</span>
			<span class="jiagou jiache">加入购物车</span>
		</div>
</div>
</template>

<script>
	export default{
		methods:{
			slun:function(){
				var lund = 0;
				setInterval(function(){
					$(".shang-img").eq(lund).fadeIn(2000).siblings(".shang-img").fadeOut(2000);
					$(".zspan").eq(lund).addClass("shang-span").siblings(".zspan").removeClass("shang-span");
					lund++;
					if (lund == 5) {
						lund = 0;
					}
				},4000);
			},
			diantian:function(){
				$(".tiangou>span").click(function(){
					$(this).addClass("jiache").siblings("span").removeClass("jiache");
				})
			}
		},
		mounted:function(){
			this.slun();
			this.diantian();
		}
	}
</script>

<style>
	/*头部*/
	.shang-top {
		position: fixed;
		top: 0;
		left: 0;
		background: #e53e42;
		width: 100%;
		height: 9.6rem;
		display: flex;
		justify-content: space-around;
		align-items: center;
		z-index: 5;
	}
	.shangpin {
		color: white;
		font-size: 3.6rem;
		text-align: center;
		padding: 0 10rem 0 20rem;
		font-weight: 200;
	}

	.shang-jian {
		width: 2.3rem;
		height: 3.8rem;
	}
	.shang-gou,.shang-ff {
		width: 3.6rem;
		height: 3.4rem;
	}
	.shang-ff{
		padding:0 2rem;
	}
	.shang-shou{
		width: 3.6rem;
		height: 3.6rem;
	}
	/*轮播图*/
	.shang-dtu{
		width: 100%;
		height: 40rem;
		border-bottom: 0.1rem solid #CCCCCC;
		margin-top: 9.6rem;
		text-align: center;
		position: relative;
		background: #FFFFFF;
	}
	.shang-dtu>a{
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
	}
	.shang-img{
		width: 12rem;
		height: 24.5rem;
		position: absolute;
		top:7.7rem;
		left:29.5rem;
		display: none;
	}
	.shang-active{
		display: block;
	}
	/*分页器*/
	.shang-fen{
		width: 100%;
		height: 5rem;
		line-height: 5rem;
		position: absolute;
		bottom: 0;
	}
	.shang-fen>span{
		display: inline-block;
		width:0.8rem;
		height: 0.8rem;
		border:0.2rem solid #FFFFFF;
		border-radius: 50%;
		background:#808080;
		margin-right:1rem;
	}
	.shang-fen .shang-span{
		background: #e53e42;
	}
	/*英国直邮*/
	.address{
		width: 100%;
		height: 23rem;
		padding-left: 2rem;
		background: #FFFFFF;
	}
	.address>p{
		font-size: 2.4rem;
		color:#4D4D4D;
	}
	.address .sbiao{
		width: 100%;
		height: 7rem;
		line-height: 7rem;
		padding-bottom: 4rem;
		font-size: 3rem;
	}
	.ytu{
		display: inline-block;
		width: 2rem;
		height: 1.5rem;
		border:0.01rem solid #FF0000;
		padding:0.8rem 1rem;
		margin:-0.5rem 0rem;
	}
	.yinguo{
		color:red;
		padding:0 1rem;
	}
	.address .smoney{
		font-size: 3.6rem;
		color:red;
	}
	.guanshui>img{
		width: 6rem;
		height: 2.4rem;
		padding-left: 2rem;
		margin:-0.3rem 0;
	}
	.jifen{
		width: 100%;
		height: 6rem;
		line-height: 6rem;
		font-size: 2.4rem;
		color:#4D4D4D;
		border-top: 0.1rem solid #CCCCCC;
		border-bottom: 0.1rem solid #CCCCCC;
		padding-top: 1rem;
		background: #FFFFFF;
	}
	.jtt{
		width: 7.5rem;
		height: 2.8rem;
		margin:0rem 2rem;
	}
	/*不支持七天退换*/
	.tuihuan{
		width: 100%;
		height: 6rem;
		border-bottom: 0.1rem solid #CCCCCC;	
		line-height: 6rem;
		background: #FFFFFF;
	}
	.tuihuo{
		padding-left: 3rem;
		padding-right: 2rem;
		font-size: 2rem;
	}
	.tuihuo>img{
		width: 3.3rem;
		height: 3.3rem;
		padding-right: 1rem;
		margin:-1rem 0;
	}
	.tuihuo .rjian{
		width: 1.4rem;
		height: 2.5rem;
		padding-left: 5rem;
	}
	/*直邮*/
	.zbiao{
		background: #FFFFFF;
		width: 100%;
		height: 10rem;
		border-bottom: 0.1rem solid #CCCCCC;
		overflow: hidden;
		margin-bottom: 2rem;
	}
	.ztu{
		display: inline-block;
		width: 2rem;
		height: 1.5rem;
		border:0.01rem solid #FF0000;
		padding:0.8rem 1rem;
		margin:3rem;
		float:left;
	}
	.rtu{
		float: right;
		width: 60rem;
		margin:-3rem 0;
		color:red;
	}
	.dizhi{
		display: inline-block;
		margin:5rem -3rem;
		font-size: 2.4rem;
	}
	.ztian{
		font-size: 1.8rem;
		margin-left: -5rem;
		border:0.1rem solid red;
		padding:0.5rem;
	}
	.aldeng{
		height: 24rem;
		border-bottom: 0.1rem solid #CCCCCC;
		background: #FFFFFF;
		margin-bottom: 1rem;
		overflow: hidden;
	}
	.dleft{
		width: 15rem;
		height: 100%;
		float:left;
	}
	.radiu{
		width: 12rem;
		height: 12rem;
		border:0.1rem solid #CCCCCC;
		border-radius: 50%;
		margin:2rem;
		background: black;
	}
	.biaozhi{
		margin:5rem 0 0 2rem;
	}
	.jxx{
		font-size: 2.4rem;
		padding-left: 2rem;
		color:#4D4D4D;
	}
	.pbiao{
		width: 62rem;
		padding-left: 4rem;
	}
	.dright{
		width: 65rem;
		font-size: 2.4rem;
		padding-top:2rem;
		color:#4D4D4D;
	}
	.sxin{
		height: 56rem;
		border-bottom: 0.1rem solid #CCCCCC;
		background: #FFFFFF; 
		line-height: 5rem;
		font-size: 2.4rem;
		padding:2rem 10rem 0 3rem;
		margin-bottom: 1rem;
	}
	.cnuo{
		height: 20rem;
		background: #FFFFFF;
	}
	.bnuo{
		width: 65rem;
		margin:auto;
		padding-top: 2rem;
	}
	.ppp{
		font-size: 3rem;
		padding:0 2rem;
	}
	.xian{
		display: inline-block;
		width: 21rem;
		height: 0.1rem;
		background: #808080;
		margin:0.8rem 0;
	}
	.ptu{
		width: 12rem;
		height: 10rem;
		float:left;
		margin-left:3rem;
		text-align: center;
		margin-top: 2rem;
	}
	.ptu>img{
		width: 6rem;
		height: 6rem;
	}
	.ptu>p{
		font-size: 1.8rem;
		padding-top: 2rem;
	}
	.ptu .picc{
		width: 8.2rem;
		height: 3.2rem;
		padding:1rem 0 2rem 0;
	}
	.xiaotieshi{
		height: 50rem;
	}
	.xiaotieshi>img{
		width: 54rem;
		padding:1rem 0 0 8rem;
	}
	.xiaotieshi>p{
		padding: 1rem 2rem;
		color:#4D4D4D;
		font-size: 2.4rem;
	}
	/*热销商品内容*/
	.s-shang{
		width: 192rem;
		background: #FFFFFF;
		overflow: hidden;
	}
	.s-danshang {
		width: 33rem;
		height: 28rem;
		border: 0.01rem solid grey;
		margin:2rem;
		float:left;
		position: relative;
	}
	
	.s-danshang>img {
		width: 14.1rem;
		height: 14.1rem;
		position: absolute;
		left: 9rem;
		top:3rem;
	}
	.s-p1 {
		font-size: 2.4rem;
		position: absolute;
		left: 8rem;
		bottom: 4.3rem;
	}
	
	.s-p2>img {
		width: 4rem;
		height: 7.6rem;
		position: absolute;
		left: 0;
		top: 0;
	}
	
	.s-p2>span {
		display: inline-block;
		width: 2.4rem;
		font-size: 2.4rem;
		position: absolute;
		left: 1rem;
		color: #FFFFFF;
	}
	.s-p3{
		height: 2rem;
		font-size: 2.4rem;;
		position: absolute;
		right:14.1rem;
		bottom:1.4rem;
		color:red;
	}
	/*右*/
	.s-danshang2 {
		width: 33rem;
		height: 28rem;
		border: 0.01rem solid grey;
		position: relative;
		margin-top:2rem;
		float:left;
	}
	
	.s-danshang2>img {
		width: 22.2rem;
		height: 12.7rem;
		position: absolute;
		left: 6rem;
		top:4.4rem;
	}
	.s-rp1 {
		font-size: 2.4rem;
		position: absolute;
		left:11.6rem;
		bottom: 4.3rem;
	}
	
	.s-rp2>img {
		width: 4rem;
		height: 7.6rem;
		position: absolute;
		left: 0;
		top: 0;
	}
	
	.s-rp2>span {
		display: inline-block;
		width: 2.4rem;
		font-size: 2.4rem;
		position: absolute;
		left: 1rem;
		color: #FFFFFF;
	}
	.s-rp3{
		height: 2rem;
		font-size: 2.4rem;;
		position: absolute;
		right:14.1rem;
		bottom:1.4rem;
		color:red;
	}
	.retui{
		width: 100%;
		height: 6rem;
		background: #FFFFFF;
		font-size: 3rem;
		line-height: 8rem;
		padding-left: 2rem;
		color:#4D4D4D;
	}
	/*拖动文字*/
	.tuobiao {
		width:100%;
		font-size: 1.8rem;
		height: 7rem;
		line-height: 7rem;
		color: #808080;
	}
	.tuwen{
		padding:0 0.8rem;
	}
	.tuo-left,
	.tuo-right {
		display: inline-block;
		width: 24.8rem;
		height: 0.1rem;
		background: #808080;
		margin-bottom: 0.7rem;
	}
	/*添加购物车*/
	.tiangou{
		width: 100%;
		overflow: hidden;
		background: #FFFFFF;
		border-top:0.1rem solid #CCCCCC;
	}
	.tiangou>span{
		display: inline-block;
		width: 36rem;
		height: 9.6rem;
		font-size: 2.8rem;
		line-height: 9.6rem;
	}
	.kefu{
		text-align: center;
		float:left;
	}
	.kefu>img{
		width: 3.7rem;
		margin:-1rem 2rem;
	}
	.jiagou{
		text-align: center;
		float:left;
	}
	.jiache{
		color:#FFFFFF;
		background: #F8545F;
	}
</style>